<template>
  <el-row class="data-screen-bottom">
    <el-col :span="12">
      <el-row>
        <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="persionImg" />
        </el-col>
        <el-col :span="12">
          <div class="data-screen-bottom-text">
            <vab-count :end-value="statistics?.yingdao?.renda || 0" :start-value="0" />
            <p>{{ getRepresentativeName }}</p>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="persionImg" />
        </el-col>
        <el-col :span="12">
          <div class="data-screen-bottom-text">
            <vab-count :end-value="statistics?.yingdao?.liexi || 0" :start-value="0" />
            <p>列席人员</p>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const persionImg = 'https://qushen-outsourcing.oss-cn-beijing.aliyuncs.com/hongyou/persion.png'

defineOptions({
  name: 'DataScreenBottom',
})

interface Props {
  statistics?: {
    renda?: number
    liexi?: number
  }
  type?: string
}

const props = defineProps<Props>()

// 根据会议类型返回对应的代表名称
const getRepresentativeName = computed(() => {
  console.log(props.type)
  switch (props.type) {
    case '1': {
      return '人大代表'
    }
    case '2': {
      return '政协委员'
    }
    default: {
      return '代表'
    }
  }
})
</script>

<style lang="scss" scoped>
.data-screen-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;

  .data-screen-bottom-icon {
    padding: 16px;
    position: relative;
  }

  &-icon {
    display: block;
    width: 100px;
    height: 100px;
    padding: var(--el-padding);
    margin: 12px auto 0 auto;
    border-radius: 50%;
    animation: twink 3s linear infinite;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%;
      height: 120%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(115, 103, 240, 0.2) 0%, rgba(115, 103, 240, 0) 70%);
      border-radius: 50%;
      z-index: -1;
    }
  }

  &-text {
    margin-top: 16px;
    font-size: 42px;
    color: #7367f0;
    text-align: left;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(115, 103, 240, 0.3);

    p {
      margin-top: 8px;
      font-size: 24px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: normal;
    }
  }
}

@keyframes twink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
